<template>
  <div id="homePages" class="views">
    <div class="container">
      <!-- 第一列 -->
      <div class="left-box">
        <!-- 公司个人信息 -->
        <div class="grid-content grid-content-t">
          <homeUserInfo />
        </div>
        <!-- 审批中心 -->
        <div class="grid-content grid-content-b">
          <homeApprove />
        </div>
      </div>
      <!-- 第二列 -->
      <div class="center-box">
        <!-- 假期时间 -->
        <div class="grid-content grid-content-t">
          <homeVacation />
        </div>
        <!-- 个人考勤 -->
        <div class="grid-content grid-content-b">
          <div class="grid-content-b-mark grid-content-b-mark-one">
            <div class="grid-mark-header">
              <div class="vertical"></div>
              <span class="txt">今日考勤</span>
              <span class="icon"><i class="el-icon-more" @click="golink('/personage')"></i></span>
            </div>
            <attendance />
          </div>
          <div style="width: 100%; height: 10px; background-color: rgb(244, 246, 250) !important"></div>
          <!-- 快捷功能 -->
          <div class="grid-content-b-mark grid-content-b-mark-two">
            <homeMenus />
          </div>
        </div>
      </div>
      <div class="right-box">
        <homeBackLog />
      </div>
    </div>
  </div>
</template>
<script>
import attendance from "../components/attendance.vue";
import homeApprove from "./homeApprove.vue";
import homeUserInfo from "./homeUserInfo.vue";
import homeVacation from "./homeVacation.vue";
import homeMenus from "./homeMenus.vue";
import homeBackLog from "./homeBackLog.vue";

export default {
  name: "homePages",
  components: {
    attendance,
    homeApprove,
    homeUserInfo,
    homeVacation,
    homeMenus,
    homeBackLog,
  },
  data() {
    return {
      isIf: true,
    };
  },
  methods: {
    golink(url) {
      this.$router.push(url);
    },
  },
  activated() {
    //v-if 刷新组件
  },
};
</script>
<style scoped lang="less">
:deep( .is-fixed ){
  position: absolute !important;
  top: 8px !important;
}
#homePages {
  margin: 0;
  height: 100% !important;
  width: 100% !important;
  min-width: 1100px !important;
  background-color: rgb(244, 246, 250) !important;
  .container {
    height: 100%;
    width: 100%;
    overflow-x: auto;
    display: flex;
    .left-box {
      width: 30%;
      margin-right: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      :deep(.el-divider) {
        margin: 0px 0px 0px 10px !important;
        width: calc(100% - 20px);
      }
      .grid-content {
        width: 100%;

        .grid-header {
          color: #333333;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
        .grid-header-bq {
          background-image: url("../../../assets/images/homeImages/EnterpriseBq.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          color: #ffffff;
          font-size: 15px;
          border-radius: 10px 10px 0px 0px;
          height: 50px;
          & > span {
            margin-left: 50px;
          }
        }
      }
      .grid-content-b {
        height: calc(78% - 10px);
        border-radius: 10px;
        background-color: white;

        .grid-content-b-mark {
          height: calc(100% - 60px);
          padding: 0px 10px;
          ul {
            height: 100%;
            overflow-y: auto;

            li {
              height: 140px;
              border-bottom: 1px solid #edeef2;
              display: flex;
              padding-top: 20px;
              // align-items: center;
              .appove-box-lf {
                width: 35px;
                height: 35px;
                margin-left: 5px;
                margin-right: 10px;
                box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
                border-radius: 50%;

                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 35px;
                }
              }
              .appove-box-rt {
                flex: 1;
                height: 60px;
                font-size: 13px;
                // color: #303133;
                p {
                  line-height: 24px;
                  & > span {
                    color: #666666;
                  }
                }
              }
            }
          }
          // margin-top: 20px;
          .grid-mark-header {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #edeef2;
            font-size: 14px;
            position: relative;

            padding-left: 15px;
            display: flex;
            justify-content: space-between;

            .icon {
              cursor: pointer;

              i {
                transform: rotate(90deg);
              }
            }
            // 小竖线图标
            .vertical {
              display: inline-block;
              height: 14px;
              border-left: 3px solid #85a9f5;
              color: black;
              position: absolute;
              top: 14px;
              left: 6px;
              border-radius: 10px;
            }
          }
        }

        .grid-content-b-mark-content {
          height: 40%;
        }
      }

      .grid-content-t {
        height: 22%;
        border-radius: 10px;
        background-color: white;
        margin-bottom: 10px;
        .grid-box-col {
          height: 15vh;
          position: relative;
          .grid-box-lf {
            span {
              margin-left: 20px;
              font-weight: 600;
              font-size: 28px !important;
              color: #303133;
            }
          }
          .grid-box-rt {
            position: absolute;
            bottom: -14px;
            right: -8px;
            transform: scale(0.7);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .grid-box {
          height: 12vh;
          display: flex;
          align-items: center;
          .grid-box-lf {
            width: 60px;
            height: 60px;
            margin-left: 20px;
            margin-right: 20px;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
            border-radius: 4px;

            img {
              width: 100%;
              height: 100%;
            }
            // background-color: red;
          }
          .grid-box-rt {
            flex: 1;
            height: 60px;
            line-height: 30px;
            font-size: 13px;
            color: #303133;
          }
        }
      }
    }

    .center-box {
      flex: 1;
      margin-right: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      :deep(.el-divider) {
        margin: 0px 0px 0px 10px !important;
        width: calc(100% - 20px);
      }
      .grid-content {
        width: 100%;
        .grid-header {
          color: #333333;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
      }
      .grid-content-b {
        height: calc(78% - 10px);
        border-radius: 10px;
        background-color: white;
        .grid-content-b-mark-one {
          height: 200px;
        }
        .grid-content-b-mark-two {
          height: calc(100% - 210px);
          padding: 10px 0px;
          ul {
            height: calc(100% - 50px);
            display: flex;
            flex-wrap: wrap;
            overflow-y: auto;
            padding-bottom: 20px;

            li {
              width: 25%;
              font-size: 13px;
              color: #303133;
              padding-top: 10px;

              cursor: pointer;
              img {
                width: 100px;
                height: 100px;
                display: flex;
                justify-content: center;
                transform: scale(0.7);
                margin: auto;
              }
              p {
                text-align: center;
              }
            }
          }
        }
        .grid-content-b-mark {
          padding: 0px 10px;
          // margin-top: 20px;
          .grid-mark-header {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #edeef2;
            font-size: 14px;
            position: relative;
            padding-left: 15px;
            display: flex;
            justify-content: space-between;
            .tarbar {
              width: 350px;
              display: inline-block;
              white-space: nowrap;
              overflow-x: auto;
              overflow-y: hidden;
              height: 40px;
              margin-right: 10px;
            }
            .el-icon-arrow-right {
              line-height: 40px;
            }
            .el-icon-arrow-left {
              line-height: 40px;
            }

            .icon {
              cursor: pointer;
              line-height: 40px;

              i {
                transform: rotate(90deg);
              }
            }
            // 小竖线图标
            .vertical {
              display: inline-block;
              height: 14px;
              border-left: 3px solid #85a9f5;
              color: black;
              position: absolute;
              top: 14px;
              left: 6px;
              border-radius: 10px;
            }
          }
        }

        .grid-content-b-mark-content {
          height: 40%;
        }
      }
      .grid-content-t {
        height: 22%;
        border-radius: 10px;
        background-color: white;
        margin-bottom: 10px;
        .grid-box-col {
          height: 15vh;
          position: relative;
          .grid-box-lf {
            span {
              margin-left: 20px;
              font-weight: 600;
              font-size: 28px !important;
              color: #303133;
            }
          }
          .grid-box-rt {
            position: absolute;
            bottom: -14px;
            right: -8px;
            transform: scale(0.7);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .grid-box {
          height: 15vh;
          display: flex;
          align-items: center;
          .grid-box-lf {
            width: 60px;
            height: 60px;
            margin-left: 20px;
            margin-right: 20px;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
            border-radius: 4px;

            img {
              width: 100%;
              height: 100%;
            }
            // background-color: red;
          }
          .grid-box-rt {
            flex: 1;
            height: 60px;
            line-height: 30px;
            font-size: 13px;
            color: #303133;
          }
        }
      }
    }
    .right-box {
      width: 30%;
      margin-right: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      :deep(.el-divider ){
        margin: 0px 0px 0px 10px !important;
        width: calc(100% - 20px);
      }
    }
  }
}
</style>
